<template>
	<view
		class="u-keyboard"
		@touchmove.stop.prevent="() => {}"
	>
		<view class="u-keyboard-grids">
			<block>
				<view
					class="u-keyboard-grids-item"
					v-for="(group, i) in abc ? EngKeyBoardList : areaList"
					:key="i"
				>
					<view
						:hover-stay-time="100"
						@tap="carInputClick(i, j)"
						hover-class="u-carinput-hover"
						class="u-keyboard-grids-btn"
						v-for="(item, j) in group"
						:key="j"
					>
						{{ item }}
					</view>
				</view>
				<view
					@touchstart="backspaceClick"
					@touchend="clearTimer"
					:hover-stay-time="100"
					class="u-keyboard-back"
					hover-class="u-hover-class"
				>
					<u-icon
						:size="38"
						name="backspace"
						:bold="true"
					/>
				</view>
				<view
					:hover-stay-time="100"
					class="u-keyboard-change"
					hover-class="u-carinput-hover"
					@tap="changeCarInputMode"
				>
					<text
						class="zh"
						:class="[!abc ? 'active' : 'inactive']"
					>
						中
					</text>
					/
					<text
						class="en"
						:class="[abc ? 'active' : 'inactive']"
					>
						英
					</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
  name: 'u-keyboard',
  props: {
    // 是否打乱键盘按键的顺序
    random: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
      abc: false
    }
  },
  computed: {
    areaList() {
      let data = [
        '京',
        '沪',
        '粤',
        '津',
        '冀',
        '豫',
        '云',
        '辽',
        '黑',
        '湘',
        '皖',
        '鲁',
        '苏',
        '浙',
        '赣',
        '鄂',
        '桂',
        '甘',
        '晋',
        '陕',
        '蒙',
        '吉',
        '闽',
        '贵',
        '渝',
        '川',
        '青',
        '琼',
        '宁',
        '挂',
        '藏',
        '港',
        '澳',
        '新',
        '使',
        '学'
      ]

      const tmp = []
      // 打乱顺序

      if (this.random) data = this.$u.randomArray(data)
      // 切割成二维数组
      tmp[ 0 ] = data.slice(0, 10)
      tmp[ 1 ] = data.slice(10, 20)
      tmp[ 2 ] = data.slice(20, 30)
      tmp[ 3 ] = data.slice(30, 36)
      return tmp
    },
    EngKeyBoardList() {
      let data = [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        0,
        'Q',
        'W',
        'E',
        'R',
        'T',
        'Y',
        'U',
        'I',
        'O',
        'P',
        'A',
        'S',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'Z',
        'X',
        'C',
        'V',
        'B',
        'N',
        'M'
      ]

      const tmp = []

      if (this.random) data = this.$u.randomArray(data)
      tmp[ 0 ] = data.slice(0, 10)
      tmp[ 1 ] = data.slice(10, 20)
      tmp[ 2 ] = data.slice(20, 30)
      tmp[ 3 ] = data.slice(30, 36)
      return tmp
    }
  },
  methods: {
    // 点击键盘按钮
    carInputClick(i, j) {
      let value = ''
      // 不同模式，获取不同数组的值

      if (this.abc) value = this.EngKeyBoardList[ i ][ j ]
      else value = this.areaList[ i ][ j ]
      this.$emit('change', value)
    },
    // 修改汽车牌键盘的输入模式，中文|英文
    changeCarInputMode() {
      this.abc = !this.abc
    },
    // 点击退格键
    backspaceClick() {
      this.$emit('backspace')
      clearInterval(this.timer) // 再次清空定时器，防止重复注册定时器
      this.timer = null
      this.timer = setInterval(() => {
        this.$emit('backspace')
      }, 250)
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
  }
}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-keyboard-grids {
		background: rgb(215, 215, 217);
		padding: 24rpx 0;
		position: relative;
	}

	.u-keyboard-grids-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
	}

	.u-keyboard-grids-btn {
		text-decoration: none;
		width: 62rpx;
		flex: 0 0 64rpx;
		height: 80rpx;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		font-size: 36rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #fff;
		margin: 8rpx 5rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 0rpx #888992;
		font-weight: 500;
		justify-content: center;
	}

	.u-carinput-hover {
		background-color: rgb(185, 188, 195) !important;
	}

	.u-keyboard-back {
		position: absolute;
		width: 96rpx;
		right: 22rpx;
		bottom: 32rpx;
		height: 80rpx;
		background-color: rgb(185, 188, 195);
		@include vue-flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: center;
		box-shadow: 0 2rpx 0rpx #888992;
	}

	.u-keyboard-change {
		font-size: 24rpx;
		box-shadow: 0 2rpx 0rpx #888992;
		position: absolute;
		width: 96rpx;
		left: 22rpx;
		line-height: 1;
		bottom: 32rpx;
		height: 80rpx;
		background-color: #ffffff;
		@include vue-flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: center;
	}

	.u-keyboard-change .inactive.zh {
		transform: scale(0.85) translateY(-10rpx);
	}

	.u-keyboard-change .inactive.en {
		transform: scale(0.85) translateY(10rpx);
	}

	.u-keyboard-change .active {
		color: rgb(237, 112, 64);
		font-size: 30rpx;
	}

	.u-keyboard-change .zh {
		transform: translateY(-10rpx);
	}

	.u-keyboard-change .en {
		transform: translateY(10rpx);
	}
</style>
